<template>
    <div><van-nav-bar title="选择城市" left-arrow @click-left="onClickLeft" />
        <van-index-bar>
            <div v-for="item in citys" :key="item.letter">
                <template>
                    <van-index-anchor :index="item.letter.toUpperCase()" />
                    <van-cell v-for="(cityItem, i) in item.data" :key="i" :title="cityItem.name"
                        @click="goHome(cityItem.name)" />
                </template>
            </div>

        </van-index-bar>
    </div>
</template>

<script>
import { DiZhi } from '@/api/guo/ferrMain'
export default {
    name: 'CityList',
    data() {
        return {
            citys: [],
            // 当前选中的城市
        }
    },
    created() {
        this.getCitysList();
    },
    methods: {

        async getCitysList() {//地址
            let { data } = await DiZhi()
            console.log(data)
            this.citys = data

        },



        goHome(cityName) {
            localStorage.setItem("cityName", cityName);
            this.$router.push("/Free");//去上一层
        },
        onClickLeft() {
            this.$router.go(-1);
        },
    }
}
</script>

<style></style>